<clr-modal [(clrModalOpen)]="isOpen" *ngIf="schedules" [clrModalClosable]="!isRunning">
  <h3 *ngIf="schedules?.length === 1" class="modal-title">Confirm Delete Schedule</h3>
  <h3 *ngIf="schedules?.length > 1" class="modal-title">Confirm Delete Schedules</h3>
  <div class="modal-body" *ngIf="schedules.length === 1 && !isRunning">
    This action will delete the schedule
    <u
      ><strong>{{ schedules[0].name }}</strong></u
    >. Are you sure?
  </div>
  <div class="modal-body" *ngIf="schedules?.length > 1 && !isRunning">
    This action will delete the
    <u
      ><strong>{{ schedules.length }} schedule{{ schedules?.length > 1 ? 's' : '' }}</strong></u
    >
    listed below.<br />Are you sure?
    <br />
    <table class="table table-striped">
      <thead>
        <tr>
          <th class="left">Name</th>
          <th class="left">Task name</th>
          <th class="left">Platform</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let schedule of schedules">
          <td class="left">
            <strong>{{ schedule.name }}</strong>
          </td>
          <td class="left">{{ schedule.taskName }}</td>
          <td class="left">{{ schedule.platform }}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="modal-body" *ngIf="isRunning">
    <clr-spinner clrInline clrSmall></clr-spinner>
    Deleting schedule(s) ...
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline" (click)="isOpen = false" [disabled]="isRunning">Cancel</button>
    <button type="button" class="btn btn-danger" (click)="destroy()" [disabled]="isRunning">
      <span *ngIf="schedules.length === 1">Delete the schedule</span>
      <span *ngIf="schedules.length > 1">Delete the schedules</span>
    </button>
  </div>
</clr-modal>
